<template>
  <div>
    <!-- 基础信息 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基础信息</span>
      </div>
      <div class="form-container">
        <el-form ref="form" :model="form" :rules="rules" label-width="130px" class="demo-ruleForm" size="small">
          <el-form-item label="团队名称" prop="team_name">
            <el-input v-model="form.team_name" placeholder="请输入团队名称"/>
          </el-form-item>
          <el-form-item label="团队负责人">
            <el-select v-model="form.leader_name" placeholder="请选择团队负责人">
              <el-option
                v-for="item in options"
                :key="item.user_name"
                :label="item.user_name"
                :value="item.user_name"/>
            </el-select>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入联系电话"/>
          </el-form-item>
          <el-form-item label="状态">
            <el-switch
              v-model="form.state"
              active-color="#13ce66"
              inactive-color="#dcdcdc"
              @change="teamstuts($event)"/>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入副标题"/>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <div class="bottom_btn">
      <el-button size="small" @click="cancel">取消</el-button>
      <el-button size="small" type="primary" @click="submitForm">提交</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { insertTeam, updateTeam, notleader, getTeamInfo } from '@/api/mall/team'

export default {
  data() {
    const checkPhone = (rule, value, callback) => {
      const reg = /^1[3456789]\d{9}$/
      if (!reg.test(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    return {
      parameterList: [],
      supplierList: [],
      labelList: [], // 公司标签数据，数据源
      selectList: [], // 选中数据的集合
      commodityLabels: [], // 传递过来的商品的标签
      // classify_id: [],
      form: {
        team_name: '', // 团队名称
        phone: '', // 手机号
        leader_name: '', // 团队负责人
        remark: '', // 备注
        state: true // 状态
      },
      rules: {
        team_name: [
          { required: true, message: '请输入宝贝名', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: checkPhone, message: '请输入正确的手机号', trigger: ['blur', 'change'] }
        ],
        remark: [
          { required: true, message: '请输入备注', trigger: 'blur' }
        ]
      },
      addtag_show: true,
      deltag_show: false,
      texts: '',
      type: '',
      options: []
    }
  },
  computed: {
    ...mapGetters([
      'userHeadUploadApi',
      'user'
    ])
  },
  mounted() {
    this.queryLeader()
  },
  created() {
    this.type = this.$route.query.type
    if (this.type === 2) {
      getTeamInfo(this.$route.query.team_id).then(res => {
        const list = res
        if (list.state === 0) {
          list.state = true
        } else {
          list.state = false
        }
        this.form = list
      })
    }
  },
  methods: {
    // 查询是团长不带团的人员
    queryLeader() {
      notleader().then(res => {
        this.options = res
      })
    },
    // 状态改变
    teamstuts(val) {
      this.form.state = val
    },
    // 提交
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const list = JSON.parse(JSON.stringify(this.form))
          if (list.state === true) {
            list.state = 0
          } else {
            list.state = 1
          }
          for (let i = 0; i < this.options.length; i++) {
            if (this.options[i].user_name === list.leader_name) {
              list.leader_id = this.options[i].user_id
              list.user_id = this.options[i].user_id
            }
          }
          if (this.type === 1) {
            list.create_id = this.user.user_id && this.user.user_id !== undefined ? this.user.user_id : 0
            this.insertTeam(list)
          } else {
            this.updateTeam(list)
          }
        }
      })
    },
    insertTeam(list) {
      insertTeam(list).then(res => {
        this.$notify({
          title: '新增成功',
          type: 'success',
          duration: 2500
        })
        this.cancel()
      }).catch(res => {

      })
    },
    updateTeam(list) {
      updateTeam(list).then(res => {
        this.$notify({
          title: '修改成功',
          type: 'success',
          duration: 2500
        })
        this.cancel()
      }).catch(res => {

      })
    },
    cancel() {
      this.$router.push({ path: '/chaomall/team/teamList' })
    }
  }
}
</script>

<style scoped>
  .form-container {
    width: 90%;
    padding-bottom: 50px;
  }

  .box-card {
    margin-bottom: 10px;
  }
  .bottom_btn {
    position: absolute;
    bottom: 0;
    z-index: 10099;
    background: hsla(0, 0%, 100%, .95);
    padding: 10px;
    border-top: none;
    width: calc(100% - 20px);
    box-shadow: 0 -3px 5px #eee;
    text-align: center;
    background: #fff;
    left: 50%;
    transform: translateX(-50%);
  }
</style>
